<template>
        <!-- <a-select v-model:value='value' show-search :field-names="{label:'name', value:'code'}" :filter-option="filterOption" :options='i18n.langOptions'></a-select> -->
        <div style="display: flex;align-items: center">
            <a-auto-complete style="flex: 1;" v-model:value='$value' :options="options" @search="onSearch" @change="onSearch" @select="onSelect" />
            <a-dropdown class="m-l-10">
                <GlobalOutlined :class="$style.icon" />
                <template #overlay>
                    <a-menu>
                        <a-menu-item v-for="(item, index) in i18n.locales" @click="toggleLocale(item.code)">{{ item.name }}</a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
            
        </div>

</template>
<script lang="ts" setup>
    import { langsApi } from '@/api/system/Lang';
import { useI18nStore } from '@/store/i18n';
import { GlobalOutlined } from '@ant-design/icons-vue';
    import { ref } from 'vue';

    const i18n = useI18nStore()

    const langs = ref<{[key:string] : string}>({})

    const locale = ref('')

    const props = defineProps<{
        modelValue:string;
    }>()

    const emit = defineEmits<{
        (e : 'update:modelValue', value:string) : void
    }>()

    const $value = ref()

    
    function change(v) {
        emit('update:modelValue', v)
    }

    function toggleLocale(code) {
        locale.value = code
        getLangs()
    }
    

    interface Option {
        value: string;
        //label:string;
    }
    
    const options = ref<Option[]>([])

    const onSelect = (v: string) => {
        for(let k in langs.value) {
            if(langs.value[k] == v) {
                change(k)
                break
            }
        }
    };


    function onSearch(searchText: string) {
        const searchTextLower = searchText.toLocaleLowerCase()
        options.value = []

        if(!searchText) {
            for(let k in langs.value) {
                options.value.push({value : langs.value[k]})
            }

            return
        }
        
        for(let k in langs.value) {
            const text = langs.value[k].toLocaleLowerCase()
            if(text == searchTextLower) {
                change(k)
            }else {
                change(searchText)
            }

            if(text.includes(searchTextLower)) {
                options.value.unshift({value : langs.value[k]})
            }else {
                options.value.push({value : langs.value[k]})
            }
            
        }
    }

    function getLangs() {
        langsApi(locale.value).then(data => {
            langs.value = data

            onSearch('')

            if(props.modelValue) {
                if(data[props.modelValue] != undefined) {
                    $value.value = data[props.modelValue]
                }
                if(!$value.value) {
                    $value.value = props.modelValue
                }
            }
        })
    }


    getLangs()

</script>

<style lang="scss" module>
    .icon{
        font-size: 16px;
        color: $primaryColor;
    }
</style>